<template>
  <div class="car">
    <nav-bar class="nav">
      <div class="nav_title" slot="center">购物车({{goodsLength}})</div>
    </nav-bar>
    <scroll class="scroll" ref="scroll">
      <list></list>
    </scroll>
    <account class="account" :totalPrice="dataPrice" @fakePrice="fakePrice"></account>
  </div>
</template>

<script>
  import navBar from 'components/common/navBar/navBar.vue'
  import scroll from 'components/common/scroll/scroll.vue'

  import list from './components/goodsList.vue'
  import account from './components/summary.vue'
  import {carPostData} from 'network/car/emit.js'
  import {mapGetters} from 'vuex'
  export default{
    name:'',
    data(){
      return {
        dataPrice:0
       }
    },
    computed:{
      ...mapGetters({
        goodsLength:'getGoodsLength',
        goodsTotalPrice:'getGoodsPrice'
      }),
      price:{
        get(){
          if(this.goodsTotalPrice==this.dataPrice)
            return this.goodsTotalPrice;
          else return this.goodsTotalPrice+this.dataPrice
        },
        set(){}
      }
    },
    methods:{
      fakePrice(price){
        this.dataPrice=Number(this.price).toFixed(2);
      },
      
    },
    components:{
      navBar,account,list,scroll
    },
    created() {

    },
    activated() {
      this.$refs.scroll.refresh()
    },
    deactivated() {
      let goods=this.$store.state.goodsList
      for(let good of goods){
        good.discount=good.desc
        good.num=good.count
        good.goodId=good.id
        good.userId=JSON.parse(window.sessionStorage.user).id
      }
      console.log(goods[0]);
      carPostData(goods).then(res=>{
        console.log('post',res);
        location.reload();
      }).catch(e=>{
        console.log(e);
      })
    },
    mounted() {
      this.$bus.$on("sendPrice",(res)=>{
        this.dataPrice=Number(res)
        console.log("res",res);
      })
    }
  }
</script>

<style scoped>
  .car{
    height: calc(100vh - 49px);
  }
  .nav{
    background-color: var(--color-tint);
    color: white;
    font-size: 16px;
  }
  .nav_title{
    margin: 0 auto;
  }
  .scroll{
    height: calc(100vh - 44px - 49px - 40px);
    position: relative;
    overflow: hidden;
    /* top: 44px; */
  }
  .account{
    height: 40px;
    line-height: 40px;
  }

</style>
